<template>
	<scroll-view class="album_scroll" scroll-y @scrolltolower="handleLower">
		<view class="album_swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
				<swiper-item v-for="item in banner" :key="item.id">
					<view class="swiper-item">
						<image :src="item.thumb" mode=""></image>
					</view>
				</swiper-item>
				 
			</swiper>
		</view>
		<view class="album_list">
			<navigator class="album_item" v-for="item in album" :key="item.id" :url="`/pages/album/index?id=${item.id}`">
				<view class="album_l">
					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="album_r">
					<view class="album_name">
						{{item.name}}
					</view>
					<view class="album_ct">
						{{item.desc}}
					</view>
					<view class="album_btn">
						<view class="album_text">
							+ 关注 
						</view>
					</view>
				</view>
			</navigator>
		</view>
	</scroll-view>
</template>

<script>
	export default{
	 data(){
		 return{
			 params:{
				 limit:30,
				 order:"new",
				 skip:0
			 },
			 banner:[],
			 album:[],
			 hasmore:true
		 }
	 },
		mounted() {
			uni.setNavigationBarTitle({
				title:"专辑"
			})
			this.getlist();
		},
		methods:{
			getlist(){
				this.request({
					url:"http://157.122.54.189:9088/image/v1/wallpaper/album",
					data:this.params
				}).then(res=>{
					console.log(res)
					
					this.banner=res.data.res.banner
					if(res.data.res.album.length===0){
						this.hasmore=false
						if(this.hasmore){
							this.params.skip+=this.params.limit
							this.getlist()
						}else{
							uni.showToast({
								title:"没有数据了",
								icon:"none"
							})
						}
						return
					}
					
					this.album=[...this.album,...res.data.res.album]
				})
				 
			},
			handleLower(){
				if(this.hasmore){
					this.params.skip+=this.params.limit
					this.getlist()
				}else{
					uni.showToast({
						title:"没有数据了",
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style scoped>
	swiper{
		height: 350rpx;
	}
	.swiper-item image{
		width: 100%;
		height: 350rpx;
	}
	.album_list{
		padding: 10rpx;
	}
	.album_item{
		padding: 10rpx 0;
		display: flex;
		border-bottom: 2rpx solid #ccc;
	}
	.album_l{
		flex: 1;
		margin-top: 2%;
		
	}
	.album_l image{
		width: 200rpx;
		height: 170rpx;
		
	}
	.album_r{
		flex: 2;
		overflow: hidden;
	}
	.album_name{
		font-size: 30rpx;
		color: #000000;
	}
	.album_ct{
		font-size: 24rpx;
		margin-top: 3%;
		color: #3B4144;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.album_btn{
		display: flex;
		justify-content: flex-end;
	}
	.album_text{
		 border: 2rpx solid #d52a7e;
		color: #d52a7e;
		margin-top: 7%;
	}
	.album_scroll{
		height: calc(100vh - 36px);
	}
</style>
